<template>
  <div>
    <!-- 数据记录 -->
    <el-form :model="searchForm" ref="searchFormRef" inline>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="searchForm.name"
          placeholder="请输入姓名"
          class="form_input"
        />
      </el-form-item>
      <!-- <el-form-item label="时间范围" prop="startDate">
        <el-date-picker
          v-model="searchForm.startDate"
          placeholder="请选择开始日期"
          type="date"
          format="YYYY-MM-DD"
          value-format="x"
          class="form_input"
        />
        <span class="mx-1">——</span>
        <el-date-picker
          v-model="searchForm.endDate"
          placeholder="请选择结束日期"
          type="date"
          format="YYYY-MM-DD"
          value-format="x"
          class="form_input"
        />
      </el-form-item> -->
      <el-form-item prop="endDate">
        <el-button type="primary" icon="Search" @click="getList()">
          查询
        </el-button>
        <el-button icon="Refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="height: calc(100vh - 13rem)">
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" link @click="openDrawer(row)">
            <el-icon><InfoFilled /></el-icon> 详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <PagingQuery :page="page" :size="size" :total="total" @getList="getList" />

    <el-drawer
      v-model="drawer"
      destroy-on-close
      title="检查结果详情"
      size="45%"
    >
      <DataLoggingDetail :tableData="filter_table" />
      <template #footer>
        <el-button @click="drawer = false">关闭</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import DataLoggingDetail from "./DataLoggingDetail.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ListResultInfos } from "../../../../../wailsjs/go/api/ReportApi";

onMounted(() => {
  getList();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const searchFormRef = ref(null);
const searchForm = ref({
  name: "",
  deviceSn: "",
  startDate: null,
  endDate: null,
});

const handleReset = () => {
  searchFormRef.value.resetFields();
  getList();
};

const page = ref(1);
const size = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }
  handleApiResponse(() =>
    ListResultInfos({
      ...searchForm.value,
      page: page.value,
      size: size.value,
      deviceSn: props.detailForm.deviceSn,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 详情按钮
const drawer = ref(false);
const filter_table = ref({});
const openDrawer = (row) => {
  filter_table.value = JSON.parse(row.dataListInfo || "[]").filter(
    (item) => item.isService == 1
  );
  drawer.value = true;
};
</script>

<style scoped lang="scss">
</style>